<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<script src="js/vue.js"></script>

	</head>

	<body>
		<div id="app">

			<button @click="findElement">查找元素</button> 通过ref = "id的值" 来查找dom元素；
			<h1 ref="hid">sdfsdfsdfs为何认为二位</h1>

			<login ref="login"></login>
			<button @click="getMsg">获取自定义组件的msg的值</button>
		</div>

		<template id="login">

			<div>

				<h1>{{ msg }}</h1>
				<hr />

			</div>
		</template>

		<script>
			var vm = new Vue({
				el: "#app",
				data: {

				},
				methods: {
					findElement() {
						console.log(this.$refs.hid.innerText)
					},
					getMsg() {
						alert(this.$refs.login.msg);
					}

				},
				components: {
					login: {
						template: "#login",
						data() {
							return {
								msg: "子组件msg值"
							}
						},
						methods: {

						}
					}
				}

			});
		</script>
	</body>

</html>